<template>
	<h-dark :title="t('auth.realTitle')"></h-dark>
	<view class="mx-[30rpx]" v-if="data.info.auth_card==1||data.info.auth_card==2||data.info.auth_card==3">
		<view class="flex justify-center mt-[60rpx]">
			<u-image width="180" height="180" mode="widthFix" src="/static/images/user/authrealname.png"></u-image>
		</view>
		<view class="my-[30rpx]">
			{{t('auth.realTips')}}
		</view>
		<view class="flex justify-between items-center mt-[100rpx]">
			<view class="">
				<view class="text-[#00D2E0] mt-[10rpx]">
					{{data.info.card_name}}({{data.info.card_num}})
				</view>
			</view>
			<view class="">
				<text class="" v-if="data.info.auth_card==1">{{t('tabs.Verified')}}</text>
				<text class="" v-if="data.info.auth_card==2">{{t('tabs.auditing')}}</text>
				<view class="text-error" v-if="data.info.auth_card==3" @click="data.info.auth_card=0">
					{{t('tabs.authFailed')}}
					<u-icon name="arrow-right" size="22"></u-icon>
				</view>
			</view>
		</view>
		<view class="text-error" v-if="data.info.auth_card==3">
			{{data.info.card_remark}}
		</view>
	</view>

	<view class="mx-[30rpx]" v-if="data.info.auth_card==0">
		<u-form :border-bottom="false" :label-width="150" label-position="top">
			<u-form-item :itemStyle="{'background':'#3d4277'}" :label="t('auth.realName')" :border-bottom="false">
				<u-input class="flex-1" v-model="formData.card_name" maxlength="20"
					:placeholder="t('auth.realNamePlaceholder')" :border="false" />
			</u-form-item>
			<u-form-item :itemStyle="{'background':'#3d4277'}" :label="t('auth.realNum')" :border-bottom="false">
				<u-input class="flex-1" v-model="formData.card_num" maxlength="32"
					:placeholder="t('auth.realNumPlaceholder')" :border="false" />
			</u-form-item>
			<u-form-item :label="t('auth.realImg')" :border-bottom="false">
				<view class="w-full">
					<view class="flex justify-between w-full">
						<view class="w-[48%] flex justify-center img1">
							<u-upload class="" ref="uploader1" :custom-btn="true" :deletable="false"
								:auto-upload="false" max-count="1" :max-size="20*1024*1024" v-model="formData.card_img1">
								<template v-slot:addBtn>
									<view class="text-center items-center slot-btn" hover-class="slot-btn__hover"
										hover-stay-time="150">
										<u-icon name="/static/images/common/photo.png" size="80"></u-icon>
										<view class="text-[#000000]">
											{{t('auth.realImg1')}}
										</view>
									</view>
								</template>
							</u-upload>
						</view>
						<view class="w-[48%] flex justify-center img2">
							<u-upload class="" ref="uploader2" :custom-btn="true" :deletable="false"
								:auto-upload="false" max-count="1" :max-size="20*1024*1024" v-model="formData.card_img2">
								<template v-slot:addBtn>
									<view class="text-center items-center slot-btn" hover-class="slot-btn__hover"
										hover-stay-time="150">
										<u-icon name="/static/images/common/photo.png" size="80"></u-icon>
										<view class="text-[#000000]">
											{{t('auth.realImg2')}}
										</view>
									</view>
								</template>
							</u-upload>
						</view>
					</view>
					<view class="flex justify-start w-full mt-[20rpx]">
						<view class="w-[48%] flex justify-center img1">
							<u-upload class="" ref="uploader3" :custom-btn="true" :deletable="false"
								:auto-upload="false" max-count="1" :max-size="20*1024*1024" v-model="formData.card_img3">
								<template v-slot:addBtn>
									<view class="text-center items-center slot-btn" hover-class="slot-btn__hover"
										hover-stay-time="150">
										<u-icon name="/static/images/common/photo.png" size="80"></u-icon>
										<view class="text-[#000000]">
											{{t('auth.realImg3')}}
										</view>
									</view>
								</template>
							</u-upload>
						</view>
					</view>
				</view>
			</u-form-item>
		</u-form>
	</view>

	<view v-if="data.info.auth_card==0" class="max-w-[750px] fixed bottom-[50rpx] w-4/5 ml-[10%]">
		<u-button type="primary" :loading="uploading" :disabled="formData.card_name == ''||formData.card_num == ''"
			@click="submitHandle"> {{t('common.submit')}}
		</u-button>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue'
	import { useUserStore } from '@/stores/user'
	import { getUserInfo, verifyRealname } from '@/api/user'
	import { uploadImage } from '@/api/app'
	import { t } from '@/utils/util'

	uni.setNavigationBarTitle({ title: t('auth.realTitle') })
	const userStore = useUserStore()
	const uploader1 = ref()
	const uploader2 = ref()
	const uploader3 = ref()
	const uploading = ref(false)

	const data = ref<any>({
		info: {
			auth_card: 4
		}
	})

	const formData = reactive<any>({
		card_name: '',
		card_num: '',
		card_img1: '',
		card_img2: '',
		card_img3: ''
	})

	const getData = async () => {
		const res = await getUserInfo()
		data.value = res;
	}

	const submitHandle = async () => {
		if (uploading.value) return;
		uploading.value = true;

		if (uploader1.value.lists.length <= 0) {
			uploading.value = false;
			return uni.$u.toast(t('auth.realImg1Empty'))
		}
		if (uploader2.value.lists.length <= 0) {
			uploading.value = false;
			return uni.$u.toast(t('auth.realImg2Empty'))
		}
		if (uploader3.value.lists.length <= 0) {
			uploading.value = false;
			return uni.$u.toast(t('auth.realImg3Empty'))
		}

		if (formData.card_img1 == '') {
			const res1 : any = await uploadImage(uploader1.value.lists[0].url, userStore.temToken!)
			formData.card_img1 = res1.url;
		}
		if (formData.card_img2 == '') {
			const res2 : any = await uploadImage(uploader2.value.lists[0].url, userStore.temToken!)
			formData.card_img2 = res2.url;
		} if (formData.card_img3 == '') {
			const res3 : any = await uploadImage(uploader3.value.lists[0].url, userStore.temToken!)
			formData.card_img3 = res3.url;
		}

		uploading.value = false;
		await verifyRealname(formData)
		uni.$u.toast(t('network.submittedSuccessfully'))
		getData();
	}
	getData()
</script>

<style lang="scss">
	.img1 {
		background-image: url('/static/images/user/authrealnameimg1.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: center;
		height: 112px;
	}

	.img2 {
		background-image: url('/static/images/user/authrealnameimg2.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: center;
		height: 112px;
	}
</style>